<template>
  <div class="my-1">
    <div class="top-5"></div>
    <div class="my-2">
      <div class="my-3">
          <div class="my-6">账户中心</div>
          <div :class="active1 == 1 ?'my-7':'my-5'" ><a href="" class="aaa1" @click.prevent="cli1()"><p>账户总览</p></a></div>
          <div :class="active == 1 ?'my-7':'my-5'" ><a href="" class="aaa1" @click.prevent="cli2()"><p>投资管理</p></a></div>
           <div class="my-6">资金管理</div>
          <div :class="active == 2 ?'my-7':'my-5'" ><a href="" class="aaa1" @click.prevent="cli3()"><p>资金明细</p></a></div>
          <div :class="active == 3 ?'my-7':'my-5'" ><a href="" class="aaa1" @click.prevent="cli4()"><p>充值</p></a></div>
          <div :class="active == 4 ?'my-7':'my-5'" ><a href="" class="aaa1" @click.prevent="cli5()"><p>提现</p></a></div>
           <div class="my-6">账户管理</div>
          <div :class="active == 5 ?'my-7':'my-5'" ><a href="" class="aaa1" @click.prevent="cli6()"><p>个人资料</p></a></div>
          <div :class="active == 6 ?'my-7':'my-5'" ><a href="" class="aaa1" @click.prevent="cli7()"><p>安全设置</p></a></div>
          <div :class="active == 7 ?'my-7':'my-5'" ><a href="" class="aaa1" @click.prevent="cli8()"><p>银行卡管理</p></a></div>
          <div :class="active == 8 ?'my-7':'my-5'" ><a href="" class="aaa1" @click.prevent="cli9()"><p>我的消息</p></a></div>
      </div>
      <div class="my-4">
         <router-view></router-view>
      </div>
     
    </div>
     <Bottom/>
  </div>
</template>


<script>
import Bottom from "./Bottom.vue"

export default {
  components: {
    Bottom
  },
  data () {
    return {
       active: 0,
      active1: 1,
    }
  },
  methods:{
    cli1(index) {
      this.$router.push({path:'AccountOverview1'});  
      this.active1 = 1;
      this.active = 0;
    },
    cli2(index) {
      this.active1 = 0;
      this.active = 1;
      this.$router.push({path:'InvestmentManagement2'});  
    },
    cli3(index) {
      this.active1 = 0;
      this.active = 2;
      this.$router.push({path:'FundDetails3'});  
    },
    cli4(index) {
      this.active1 = 0;
      this.active = 3;
      this.$router.push({path:'Recharge4'});  
    },
    cli5(index) {
      this.active1 = 0;
      this.active = 4;
      this.$router.push({path:'Withdrawal5'});  
    },
    cli6(index) {
      this.active1 = 0;
      this.active = 5;
      this.$router.push({path:'PersonalData6'});  
    },
    cli7(index) {
      this.active1 = 0;
      this.active = 6;
      this.$router.push({path:'SecuritySetting7'});  
    },
    cli8(index) {
      this.active1 = 0;
      this.active = 7;
      this.$router.push({path:'BankCard8'});  
    },
    cli9(index) {
      this.active1 = 0;
      this.active = 8;
      this.$router.push({path:'MyMessage9'});  
    }
  }
};
</script>


<style>
.top-5{
  width: 100%;
  float: left;
  height: 50px;
}
.aaa1 p:visited{
  color:red;
}
.aaa1 p{
  color: rgb(36, 96, 145);
}
.my-6{
    float: left;
    width: 100%;
    height: 40px;
    font-size: 110%;
    text-align: center;
    line-height: 40px;
    margin-top: 5px;
    font-weight:bold;
}
.my-5{
    float: left;
    width: 100%;
    height: 40px;
    /* font-size: 110%; */
    text-align: center;
    line-height: 40px;
    margin-top: 5px;
}.my-7{
    float: left;
    width: 100%;
    height: 40px;
    /* font-size: 110%; */
    text-align: center;
    line-height: 40px;
    margin-top: 5px;
    color: red;
    font-weight:bold;
}
.my-4{
    float: left;
    width: 75%;
    height: 100%;
    margin-left: 5%;
    background-color: #fff;
}
.my-3{
    float: left;
    width: 13%;
    height: 800px;
    background-color: #fff;
}
.my-2{
    float: left;
    width: 83%;
    margin-left: 12%;
     background-color: #f6f6f6;
    margin-top: 20px;
}
.my-1{
  width: 100%;
  background-color: #f6f6f6;
  float: left;
   height: 100%; 
}
</style>